import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

export default class App extends React.Component {
  state = {
    // 用户名输入框
    username: '',
    // 评论内容
    content: '',
    // 列表数组
    list: [
      {
        id: 1,
        username: '思聪',
        content: '想你的夜',
      },
      {
        id: 2,
        username: '马芸',
        content: '我对钱不感兴趣',
      },
      {
        id: 3,
        username: '王简林',
        content: '实现一个小目标',
      },
    ],
  };

  hanelChange = (e) => {
    console.log('e  ----->  ', e.target);
    //   解构，e.target里面有name和value
    const { name, value } = e.target;
    this.setState({ [name]: value.trim() });
  };

  // 发表评论
  handelSubmit = (e) => {
    e.preventDefault();

    // 将新增数据到list中，解构出来
    const { username, content, list } = this.state;

    //   非空判断
    if (!username.trim() || !content.trim()) {
      return;
    }

    //   声明一个新列表保存
    const newList = {
      id: Date.now(),
      username,
      content,
    };
    //   更新最新列表，并将表单清空
    this.setState({ list: [newList, ...list], username: '', content: '' });
  };

  // 删除
  handelDel = (id) => {
    //   过滤器筛选,filter方法会过滤然后返回一个新数组，id就是用户当前点击的id，item.id是数组里的id，比如我现在要删除id为2的那条数据，那么返回的是除了id为2以外的其他数据，即用取反
    const newlist = this.state.list.filter((item) => item.id !== id);
    // 更新列表
    this.setState({ list: newlist });
  };

  // 清空列表
  handelClear = () => {
    this.setState({ list: [] });
  };

  render() {
    //   使用解构
    const { list, username, content } = this.state;
    return (
      <div className="app">
        {/* 表单提交的时候，运行发布评论的函数 */}
        <Header
          username={username}
          content={content}
          handelSubmit={this.handelSubmit}
          hanelChange={this.hanelChange}
          handelClear={this.handelClear}
        ></Header>
        {/* 三元表达式，长度判断 */}
        <CommentList list={list} handelDel={this.handelDel}></CommentList>
      </div>
    );
  }
}
function CommentList({ list, handelDel }) {
  return list.length ? (
    <ul>
      {/* 列表渲染 */}
      {list.map((item) => (
        <li key={item.id}>
          <h3>评论人: {item.username}</h3>
          <p>评论内容：{item.content}</p>

          <button onClick={() => handelDel(item.id)}>删除</button>
        </li>
      ))}
    </ul>
  ) : (
    <div>暂无数据</div>
  );
}

function Header({ username, content, hanelChange, handelClear, handelSubmit }) {
  return (
    <form>
      <input
        className="user"
        onChange={hanelChange}
        value={username}
        name="username"
        type="text"
        placeholder="请输入评论人"
      />
      <br />
      <textarea
        className="content"
        onChange={hanelChange}
        value={content}
        name="content"
        cols="30"
        rows="10"
        placeholder="请输入评论内容"
      />
      <br />
      <button onClick={handelSubmit}>发表评论</button>
      <button type="button" onClick={handelClear}>
        清空评论
      </button>
    </form>
  );
}
